<template>
  <div class="main">
    <UncheckedExpertSearchTools/>
    <el-divider>未审核专家列表</el-divider>
    <el-table
        :data="allUncheckedExpert"
        style="width: 100%">
      <el-table-column
          label="姓名"
          width="130">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="性别"
          width="130">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.sex }}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="电话"
          width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.phone }}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="电子邮件"
          width="200">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.email }}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="证件号"
          width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.license }}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="审核状态"
          width="180">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">未审核</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="handlePass(scope.$index, scope.row)">通过</el-button>
          <el-button
              size="mini"
              type="danger"
              @click="handleUnPass(scope.$index, scope.row)">未通过</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>

import UncheckedExpertSearchTools from "@/components/admin/UncheckedExpertSearchTools";
import {mapActions, mapState} from "vuex";

export default {
  name: "CheckExpert",
  components:{
    UncheckedExpertSearchTools,
  },
  methods:{
    handlePass(index, row) {
      this.expertChecked(row.uid)
      this.findAllUncheckedExpert();
    },
    handleUnPass(index, row) {
      this.expertUnChecked(row.uid)
      this.findAllUncheckedExpert();
    },
    ...mapActions('expert',{findAllUncheckedExpert:"findAllUncheckedExpert"}),
    ...mapActions('user',{expertChecked:"expertChecked",expertUnChecked:"expertUnChecked"})
  },
  computed:{
    ...mapState('expert',['allUncheckedExpert'])
  },
  created() {
    this.findAllUncheckedExpert();
  }
}
</script>

<style scoped>
.main{
  margin: 50px 20px 20px;
}
</style>